<template>
    <div>
        <AddFinanceModel />
        <EditFinanceModel />
        <div class="com_box">
            <div class="time_head flexbox flexcenter flexbetween">
                <div class="flexbox flexcenter">
                    <el-popover placement="bottom-start" width="380" v-model="is_model">
                        <div slot="reference" class="select_box flexbox flexcenter flexbetween">
                            <div class="flexbox flexcenter">
                                <img src="../../assets/img/model_icon.svg" alt="" class="select_icon">
                                <span class="select_text">{{modelCheck.name?modelCheck.name:'请选择模板'}}</span>
                            </div>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <div class="time_model">
                            <span class="tm_title font_16 color_01">模板</span>
                            <div class="yusuan_list">
                                <div class="yusuan_item flexbox flexcenter flexbetween" @click="changeModel(item,index)" :class="{'active':modelCheck.id==item.id}" v-for="(item,index) in modelList" :key="index">
                                    <img src="../../assets/img/market_checked.svg" alt="" class="ys_check">
                                    <div class="font_14 color_01">{{item.name}}</div>
                                    <div class="yusuan_edit flexbox flexcenter">
                                        <span class="time_tag" v-if="item.marketing_goal == 'LIVE_PROM_GOODS'">直播带货</span>
                                        <span class="time_tag" v-else-if="item.marketing_goal == 'VIDEO_PROM_GOODS'">短视频带货</span>
                                        <span class="icon_btn" @click.stop="editFinanceModel(item,index)"><img src="../../assets/img/edit_icon.svg" alt=""></span>
                                        <span class="icon_btn" v-if="modelList.length>1" @click.stop="deletModel(item,index)"><img src="../../assets/img/ys_icon2.svg" alt=""></span>
                                    </div>
                                </div>
                            </div>
                            <el-button plain size="small" style="width:100%" @click="addFinanceModel">添加模板</el-button>
                        </div>
                    </el-popover>

                    <el-date-picker style="width:260px;margin-left:12px" value-format="yyyy-MM-dd" v-model="queryInfo.date" type="daterange" clearable @change="changeDate()" range-separator="-" :clearable="false" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>

                    <el-select v-model="queryInfo.view_delivery_type" @change="changeType" placeholder="资金池类型" style="margin-left:10px;width:180px" class="user_select">
                        <el-option label="全部" value="ALL"></el-option>
                        <el-option label="通用" value="DEFAULT"></el-option>
                        <el-option label="品牌" value="BRAND"></el-option>
                    </el-select>

                    <div class="flexbox flexcenter">
                        <el-popover placement="bottom-start" width="225" trigger="hover" style="margin-left:10px">
                            <div slot="reference">
                                <i class="el-icon-question has_quetion"></i>
                            </div>
                            <ul class="hasSelectList">
                                <li v-for="(item,index) in modelCheck.advertiser" :key="index">{{item.name}}</li>
                            </ul>
                        </el-popover>
                        <span class="font_14 color_02">已选广告组</span>
                    </div>
                </div>
                <div class="flexbox flexcenter">
                    <el-button size="small" type="primary" @click="downloadFile" :disabled="down_loadding">
                        <div class="flexbox flexcenter flexjust">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-right:5px">
                                <path d="M8 14.6C11.6451 14.6 14.6 11.6451 14.6 8C14.6 4.35492 11.6451 1.4 8 1.4C4.35492 1.4 1.4 4.35492 1.4 8C1.4 11.6451 4.35492 14.6 8 14.6Z" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M12.1999 12.2003L11.2999 11.3003" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M3.79993 3.80029L4.69993 4.70029" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M7.14287 9.20015H5.25713M5 10.1001L5.25713 9.20015L5 10.1001ZM7.4 10.1001L7.14287 9.20015L7.4 10.1001ZM7.14287 9.20015L6.2 5.90015L5.25713 9.20015H7.14287Z" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M11.3001 8.00015C11.3001 9.50015 10.2256 10.1001 8.90015 10.1001V5.90015C10.2256 5.90015 11.3001 6.50015 11.3001 8.00015Z" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            导出数据
                        </div>
                    </el-button>
                </div>
            </div>
            <div class="pd_20">
                <div class="time_title">总计</div>
            </div>
            <div class="time_count flexbox" v-loading="all_loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                <div class="finance_item flexbox flexcolumn flexjust">
                    <div class="finance_text">消返红包消耗</div>
                    <div class="finance_val">{{countData.deduction_cost}}</div>
                </div>
                <div class="finance_item flexbox flexcolumn flexjust">
                    <div class="finance_text">余额总消耗</div>
                    <div class="finance_val">{{countData.cost}}</div>
                </div>
                <div class="finance_item flexbox flexcolumn flexjust">
                    <div class="finance_text">赠款消耗</div>
                    <div class="finance_val">{{countData.grant_cost}}</div>
                </div>
                <div class="finance_item flexbox flexcolumn flexjust">
                    <div class="finance_text">非赠款消耗</div>
                    <div class="finance_val">￥{{countData.cash_cost}}</div>
                </div>
                <div class="finance_item flexbox flexcolumn flexjust">
                    <div class="finance_text">赠款余额</div>
                    <div class="finance_val">￥{{countData.grant_balance}}</div>
                </div>
                <div class="finance_item flexbox flexcolumn flexjust">
                    <div class="finance_text">非赠款余额</div>
                    <div class="finance_val">￥{{countData.cash_balance}}</div>
                </div>
                <div class="finance_item flexbox flexcolumn flexjust">
                    <div class="finance_text">总转出</div>
                    <div class="finance_val">{{countData.transfer_out}}</div>
                </div>
                <div class="finance_item flexbox flexcolumn flexjust">
                    <div class="finance_text">总转入</div>
                    <div class="finance_val">{{countData.transfer_in}}</div>
                </div>
                <div class="finance_item flexbox flexcolumn flexjust">
                    <div class="finance_text">总存入</div>
                    <div class="finance_val">{{countData.income}}</div>
                </div>
            </div>
        </div>
        <div class="com_box pd_20" style="margin-top:20px">
            <div class="time_title">数据列表</div>
            <el-table :data="tableData" @sort-change='sortChange' class="com_table" max-height="700" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据，请选择模板</div>
                </div>
                <el-table-column prop="advertiser_name" label="广告主账户" min-width="200">
                </el-table-column>
                <el-table-column prop="advertiser_id" label="广告主ID" min-width="180">
                </el-table-column>
                <el-table-column prop="view_delivery_type" label="资金池类型" min-width="140" sortable="custom">
                    <template slot-scope="scope">
                        {{scope.row.view_delivery_type=='DEFAULT'?'通用':'品牌'}}
                    </template>
                </el-table-column>
                <el-table-column prop="deduction_cost" label="消返红包消耗" min-width="160" sortable="custom">
                </el-table-column>
                <el-table-column prop="cost" label="余额总消耗" min-width="140" sortable="custom">
                </el-table-column>
                <el-table-column prop="grant_cost" label="赠款消耗" min-width="140" sortable="custom">
                </el-table-column>
                <el-table-column prop="cash_cost" label="非赠款消耗" min-width="140" sortable="custom">
                </el-table-column>
                <el-table-column prop="cash_balance" label="非赠款余额" min-width="140" sortable="custom">
                </el-table-column>
                <el-table-column prop="grant_balance" label="赠款余额" min-width="140" sortable="custom">
                </el-table-column>
                <el-table-column prop="transfer_in" label="总转入" min-width="140" sortable="custom">
                </el-table-column>
                <el-table-column prop="transfer_out" label="总转出" min-width="140" sortable="custom">
                </el-table-column>
                <el-table-column prop="income" label="总存入" min-width="140" sortable="custom">
                </el-table-column>
                <el-table-column prop="total_balance" label="总余额" min-width="140" sortable="custom">
                </el-table-column>
            </el-table>
            <div class="page_box flexbox flexcenter">
                <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import AddFinanceModel from "./AddFinanceModel";
import EditFinanceModel from "./EditFinanceModel";
import { json2excel } from "../../excel/setMethods";
export default {
    name: "",
    data() {
        return {
            loading: false,
            all_loading: false,
            is_model: false,
            down_loadding: false,
            modelCheck: {},
            modelList: [],
            activeModel: null,
            countData: {},
            queryInfo: {
                template_id: "",
                view_delivery_type: "ALL",
                order_field: "",
                order_type: "",
                date: [],
                page: 1,
                limit: 20,
            },
            total: 0,
            setpage: 1,
            tableData: [],
        };
    },
    created() {
        this.getModelList();
    },
    beforeDestroy() {
        window.sessionStorage.removeItem("financeQuery");
    },
    methods: {
        formatNowDate() {
            let date = new Date();
            var myyear = date.getFullYear();
            var mymonth =
                date.getMonth() + 1 < 10
                    ? "0" + (date.getMonth() + 1)
                    : date.getMonth() + 1;
            var myweekday =
                date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            let day_start = myyear + "-" + mymonth + "-" + myweekday;
            let day = [day_start, day_start];
            return day;
        },

        //获取模板列表
        async getModelList() {
            const { data: res } = await this.$http.post(
                "finance/Finance/templateList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.modelList = res.data;
                let sessionForm = JSON.parse(
                    window.sessionStorage.getItem("financeQuery")
                );
                if (sessionForm) {
                    this.queryInfo = sessionForm.queryInfo;
                    this.modelCheck = sessionForm.modelCheck;
                } else {
                    this.queryInfo.date = this.formatNowDate();
                    this.queryInfo.template_id = res.data[0].id;
                    this.modelCheck = res.data[0];
                }
                this.getDuringList(1);
                this.getCountList();
            }
        },

        //获取列表数据
        async getDuringList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "finance/Finance/listCount",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
            }
        },

        //获取总计数据
        async getCountList() {
            this.all_loading = true;
            const { data: res } = await this.$http.post(
                "finance/Finance/allCount",
                {
                    template_id: this.queryInfo.template_id,
                    view_delivery_type: this.queryInfo.view_delivery_type,
                    date: this.queryInfo.date,
                }
            );
            if (res.code !== 200) {
                this.all_loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.all_loading = false;
                this.countData = res.data;
            }
        },

        //导出表格
        async downloadFile() {
            this.down_loadding = true;
            const { data: res } = await this.$http.post(
                "finance/Finance/listCount",
                {
                    template_id: this.queryInfo.template_id,
                    view_delivery_type: this.queryInfo.view_delivery_type,
                    page: 1,
                    limit: 0,
                    order_field: this.queryInfo.order_field,
                    order_type: this.queryInfo.order_type,
                    date: this.queryInfo.date,
                }
            );
            if (res.code !== 200) {
                this.down_loadding = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.down_loadding = false;
                let sum_data = []
                sum_data.push({
                    deduction_cost:this.countData.deduction_cost,
                    cost:this.countData.cost,
                    grant_cost:this.countData.grant_cost,
                    cash_cost:this.countData.cash_cost,
                    grant_balance:this.countData.grant_balance,
                    cash_balance:this.countData.cash_balance,
                    transfer_out:this.countData.transfer_out,
                    transfer_in:this.countData.transfer_in,
                    income:this.countData.income,
                })
                for (let i in res.data.list) {
                    res.data.list[i].advertiser_id =
                        res.data.list[i].advertiser_id + "";
                    res.data.list[i].view_delivery_type =
                        res.data.list[i].view_delivery_type == "DEFAULT"
                            ? "通用"
                            : "品牌";
                }
                let s_data = res.data.list;
                var excelDatas = [
                    {
                        tHeader: ["广告主账户","广告主ID","资金池类型","消返红包消耗","余额总消耗","赠款消耗","非赠款消耗","非赠款余额","赠款余额","总转入","总转出","总存入","总余额"],
                        filterVal: ["advertiser_name","advertiser_id","view_delivery_type","deduction_cost","cost","grant_cost","cash_cost","cash_balance","grant_balance","transfer_in","transfer_out","income","total_balance"],
                        tableDatas: s_data,
                        sheetName: "财务流水",
                    },
                    {
                        tHeader: ["消返红包消耗","余额总消耗","赠款消耗","非赠款消耗","赠款余额","非赠款余额","总转出","总转入","总存入"],
                        filterVal: ["deduction_cost","cost","grant_cost","cash_cost","grant_balance","cash_balance","transfer_out","transfer_in","income"],
                        tableDatas: sum_data,
                        sheetName: "财务总计",
                    },
                ];
                json2excel(excelDatas,'财务数据',true,"xlsx");
            }
        },
        

        // 切换模板
        changeModel(item, index) {
            this.is_model = false;
            this.modelCheck = item;
            this.queryInfo.template_id = item.id;
            this.getDuringList(1);
            this.getCountList();
            this.sesstionData();
        },

        // 选择日期
        changeDate() {
            this.getDuringList(1);
            this.getCountList();
            this.sesstionData();
        },

        // 选择类型
        changeType() {
            this.getDuringList(1);
            this.getCountList();
            this.sesstionData();
        },

        // 添加模板
        addFinanceModel() {
            const attr = {
                dialogVsb: true,
            };
            this.$bus.emit("addFinanceModel", attr);
        },

        // 编辑模板
        editFinanceModel(item, index) {
            let advertiser_id = item.advertiser.map((item) => {
                return item.advertiser_id;
            });
            const attr = {
                dialogVsb: true,
                name: item.name,
                template_id: item.id,
                advertiser_id: advertiser_id,
                is_select: item.id == this.modelCheck.id ? true : false,
            };
            this.$bus.emit("editFinanceModel", attr);
        },

        // 删除模板
        deletModel(item, index) {
            this.$confirm("是否要删除该模板?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "finance/Finance/templateDelete",
                        {
                            template_id: item.id,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.modelList.splice(index, 1);
                        if (item.id == this.modelCheck.id) {
                            console.log(1);
                            this.modelCheck = this.modelList[0];
                            this.queryInfo.template_id =
                                this.modelList[0].template_id;
                            this.getDuringList(1);
                            this.getCountList();
                        }
                        this.sesstionData();
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                    }
                })
                .catch(() => {});
        },

        // 排序
        sortChange(column) {
            this.queryInfo.order_type = "";
            this.queryInfo.order_field = "";
            if (!column.order) {
                this.getDuringList(this.setpage);
                return;
            } else {
                var order = column.order.slice(0, -6);
            }
            this.queryInfo.order_type = order;
            this.queryInfo.order_field = column.prop;
            this.getDuringList(1);
        },

        sesstionData() {
            let sessionForm = {
                modelCheck: this.modelCheck,
                queryInfo: this.queryInfo,
            };
            window.sessionStorage.setItem(
                "financeQuery",
                JSON.stringify(sessionForm)
            );
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDuringList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDuringList(val);
        },
    },
    components: {
        AddFinanceModel,
        EditFinanceModel,
    },
};
</script>


<style scoped>
.time_head {
    height: 80px;
    border-bottom: 1px solid #ebebeb;
    margin: 0 20px;
}
.select_icon {
    margin-right: 10px;
}
.select_box {
    width: 260px;
}
.select_pre {
    height: 100%;
}
.time_title {
    font-size: 16px;
    color: #17233d;
    line-height: 22px;
    position: relative;
    font-weight: bold;
}
.time_count {
    padding: 0 20px;
    flex-wrap: wrap;
}
.finance_item {
    width: 235px;
    height: 80px;
    background: rgba(165, 177, 209, 0.08);
    border-radius: 4px;
    padding-left: 16px;
    padding-right: 10px;
    margin-right: 16px;
    margin-bottom: 16px;
    box-sizing: border-box;
}
.finance_text {
    font-size: 13px;
    color: #616c85;
    line-height: 18px;
    height: 18px;
}
.finance_val {
    font-family: "DINPro";
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #17233d;
    margin-top: 8px;
}
.time_rank {
    margin-top: 20px;
}
.page_box {
    padding: 0;
}
.com_table {
    margin-top: 20px;
}
.time_model {
    padding: 8px;
}
.yusuan_list {
    margin-top: 0;
    margin-bottom: 20px;
}
.time_tag {
    padding: 0 8px;
    line-height: 21px;
    height: 21px;
    font-size: 12px;
    color: #616c85;
    border-radius: 2px;
    margin-right: 10px;
    background-color: rgba(165, 177, 209, 0.08);
}
.el-icon-question.has_quetion {
    color: #cfd4dd;
    margin-top: 3px;
    margin-right: 5px;
}
</style>

<style>
.user_select .el-input__suffix .el-icon-arrow-up:before {
    content: "";
    color: #17233d;
}
</style>

